<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				width:100px;
				height:100px;
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<!--<button id="se" onclick="changebg('red')">变红</button>
		<button id="lv" onclick="changebg('green')">变绿</button>
		<button id="yel" onclick="changebg('yellow')">变黄</button>-->
		<button id="se" onclick = "change('red')">变红</button>
		<button id="lv" onclick = "change1('green')">变绿</button>
		<button id="yel" onclick = "change2('yellow')">变黄</button>
		<!--<button id="se" >变红</button>
		<button id="lv" >变绿</button>
		<button id="yel">变黄</button>-->
		<script type="text/javascript">
//			var btn = document.getElementById("se");
//			console.log(btn);
//			var div1 = document.getElementById("div1");
//			console.log(odiv);
//			var btn1 = document.getElementById("lv");
//			console.log(btn1);
//			var btn2 = document.getElementById("yel");
//			console.log(btn2);
//			//一.匿名函数 无参
//			btn.onclick = function (){
//				div1.style.background = "red";
//			}
//			btn1.onclick = function (){
//				div1.style.background = "greenyellow";
//			}
//			btn2.onclick = function (){
//				div1.style.background = "yellow";
//			}
			
			//上面的写法可以实现效果没问题，但是它的可复用性查，可维护性差，代码量多
			
			//二.有名函数 传参调用
			var btn = document.getElementById("se");
			var btn1 = document.getElementById("lv");
			var btn2 = document.getElementById("yel");
			
//			function yanSe(anniu,ys){
//				anniu.style.background = ys;
//			}
//			function yanS(anniu){
//				anniu.style.background ="0";
//			}
//			btn.onfocus = function(){
//				yanSe(btn,"red");
//			}
//			btn.onblur = function(){
//				yanS(btn);
//			}
//			btn1.onfocus = function(){
//				yanSe(btn1,"green");
//			}
//			btn1.onblur = function(){
//				yanS(btn1);
//			}
//			btn2.onfocus = function(){
//				yanSe(btn2,"yellow");
//			}
//			btn2.onblur = function(){
//				yanS(btn2);
//			}
			
			
			function change(ye){
				btn.style.background=ye;	
			}
			function change1(ye){
				btn1.style.background=ye;
			}
			function change2(ye){
				btn2.style.background=ye;
			}
			
//             点击按钮使div盒子变色
//			var div1 = document.getElementById("div1");
//			function changebg(cl){
//				div1.style.background=cl;
//			}
			
		</script>
	</body>
</html>
